<template>
<div class="topo-main" id="main-container">
  <div id="item-1" class="source-item">
    item-1
  </div>
  <div id="item-2" class="target-item">
    item-2
  </div>
</div>
</template>

<script lang="ts">

import { defineComponent, ref, onMounted, onUnmounted, reactive, nextTick } from 'vue';
import {
  BrowserJsPlumbInstance,
  EVENT_CLICK,
  EVENT_DRAG,
  EVENT_DRAG_START,
  EVENT_DRAG_STOP,
  EVENT_ELEMENT_DBL_CLICK,
  EVENT_ELEMENT_TAP,
  EVENT_ENDPOINT_CLICK,
  EVENT_ENDPOINT_DBL_CLICK,
  EVENT_ENDPOINT_MOUSEOUT,
  newInstance,
  ready
} from '@jsplumb/browser-ui'


export default defineComponent({
  name: 'IndexPage',
  components: {

  },
  setup (props, context) {
    let plumbInstance: BrowserJsPlumbInstance;

    onMounted(() => {
      plumbInstance = newInstance({
        container: document.getElementById('main-container') as HTMLElement,
        dragOptions: {
          grid: { w: 50, h: 50 }
        }
      });

      ready(() => {
        //默认配置
        plumbInstance.importDefaults({
          anchor: ['Left', 'Right', 'Top', 'Bottom', [0.3, 0, 0, -1], [0.7, 0, 0, -1], [0.3, 1, 0, 1], [0.7, 1, 0, 1]],
          connector: { type: 'Flowchart', options: { gap: 5 } },
          maxConnections: -1,
          endpoints: [
            { type: 'Dot', options: { radius: 5 } },
            { type: 'Dot', options: { radius: 5 } }
          ],
          connectionOverlays: [],
          endpointStyle: {
            stroke: 'black',
            fill: 'black'
          },
          paintStyle: { // 线条填充
            stroke: '#333',
            strokeWidth: 2
          },
          hoverPaintStyle: { // 线条移入时的填充
            stroke: 'red',
            strokeWidth: 4
          }
        });
        plumbInstance.connect({
          // 对应上述基本概念
          source: document.getElementById('item-1') as HTMLElement,
          target: document.getElementById('item-2') as HTMLElement,
          anchors: ['Top', 'Left']
        });
        // plumbInstance.connect({
        //   // 对应上述基本概念
        //   source: document.getElementById('item-1') as HTMLElement,
        //   target: document.getElementById('item-2') as HTMLElement,
        //   anchors: ['Right', 'Bottom']
        // });
        let ap = plumbInstance.addEndpoint(document.getElementById('item-1') as HTMLElement, {
          source: true,
          anchor: [1, 0.2, 1, 0],
          endpoint: 'Dot'
        });
        // plumbInstance.addEndpoint(document.getElementById('item-1') as HTMLElement, {
        //   anchor: [1, 0.4, 1, 0],
        //   endpoint: 'Rectangle'
        // });
        //
        plumbInstance.addEndpoint(document.getElementById('item-2') as HTMLElement, {
          target: true,
          anchor: [0, 0.2, -1, 0],
          endpoint: 'Rectangle'
        });
        // plumbInstance.addEndpoint(document.getElementById('item-2') as HTMLElement, {
        //   anchor: [0, 0.4, -1, 0],
        //   endpoint: 'Rectangle'
        // });

        plumbInstance.bind(EVENT_ENDPOINT_DBL_CLICK, (endpoint, originalEvent) => {
          alert('endpoint');
        });

        //(document.getElementById('main-container') as HTMLElement).style.transform = 'scale(0.5)';
      });
    });

    onUnmounted(() => {
      plumbInstance.reset();
    });

    return {};
  }
});
</script>

<style lang="scss" scoped>
  .topo-main {
    position: relative;
    background: #bccefb;
    width: 880px;
    height: 600px;
    .source-item {
      position: absolute;
      background: #1ab394;
      left: 50px;
      top: 50px;
      width: 100px;
      height: 100px;
    }

    .target-item {
      position: absolute;
      background: #9C27B0;
      left: 450px;
      top: 50px;
      width: 100px;
      height: 100px;
    }
  }


</style>
